<template>
  <div class="listConatainer">
    <template v-for="(item, index) in data" :key="item.key">
      <div class="listItem">
        <div class="left">
          <Icon-file-small width="16" height="16" />
          <div class="inputName" v-if="active">
            <input :class="{ input: true, active: ActiveIndex === index }" @blur="blurHandleFn"
              @focus="() => handleFousFn(index)" v-model.trim="newName" type="text">
          </div>
          <div v-else class="title ellipsis">
            {{ item.name }}
          </div>
        </div>
        <div class="right">
          <slot name="right_icon" :item="item"></slot>
        </div>
      </div>
    </template>

  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
export type childrenType = {
  name: string,
  key: number,
  path: string
}
const props = defineProps({
  data: {
    type: Object as () => childrenType[],
    require: true
  }
})
const newName = ref('')
const active = ref(false)
const ActiveIndex = ref<number | null>(null)
const handleFousFn = (index: number) => {
  console.log(index);
  ActiveIndex.value = index
  active.value = true
}
const blurHandleFn = () => {
  ActiveIndex.value = null
  active.value = false
}
</script>
<style scoped lang="less">
.listConatainer {
  width: 100%;

  .listItem {
    height: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding-left: 26px;

    &:hover {
      background-color: var(--qianse);
    }
  }

  .left {
    width: 80%;
    display: flex;
    align-items: center;

    .title,
    .inputName {
      margin-left: 4px;
    }

    .inputName {
      .input {
        width: auto;
        color: var(---E5E5CB);
        border: 1px solid transparent;
        outline: none;
        background-color: transparent;
      }

      .active {
        border: 1px solid var(---E5E5CB);
      }
    }
  }
}
</style>